<template>
     <div class="wrapper">
       <swiper :options="swiperOption">
           <swiper-slide class="swiper-img" v-for="item in swiper" :key="item.id">
             <img :src="item.imgUrl" alt=""></swiper-slide>
           <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
     </div>
</template>

<script>
    export default {
        name: "HomeSwiper",
        props: {
            swiper: {
                type: Array
            }
        },
        data () {
          return {
            swiperOption: {
              autoplay: 2000,
              loop: true,
              pagination: ".swiper-pagination"
            },
            // imgUrl: [
            //   {
            //     id: "001",
            //     url: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg"
            //   },
            //   {
            //     id: "002",
            //     url: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/e440c31af79c0b9d1a1e84c577205562.jpg_750x200_0729c45b.jpg"
            //   },
            //   {
            //     id: "003",
            //     url: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/818f6cc784ae6669b74bbbb255414a53.jpg_750x200_66ca5873.jpg"
            //   }
            // ]
          }
        }
     }
</script>

<style lang="stylus" scoped>
     .wrapper >>> .swiper-pagination-bullet-active
        background: #ffffff !important
     .wrapper
        width: 100%
        overflow: hidden
        padding-bottom : 28.6666666%
        height: 0
       .swiper-img
           img {
             width: 100%
           }
</style>
